<template>
    <div>
        <el-descriptions class="margin-top" title="个人基本信息:" :column="3">
            <el-descriptions-item label="头像">
                <div class="demo-image__preview" @click="openDialog">
                    <el-image style="width: 47px; height: 47px"
                        :src="$axios.defaults.baseURL + $store.state.user.userInfo.user.defaultAvatar">
                    </el-image>
                </div>
                <!-- 点击即大图预览 -->
                <el-dialog :visible.sync="dialogVisible" :show-close="false" :modal-append-to-body="false">
                    <img :src="$axios.defaults.baseURL + $store.state.user.userInfo.user.defaultAvatar" style="width: 50%">
                </el-dialog>
            </el-descriptions-item>

            <el-descriptions-item label="用户名">{{ this.$store.state.user.userInfo.user.nickname
            }}</el-descriptions-item>
            
            <!-- 因为无法从后端获取用户个人信息
                        目前除了头像、用户名、手机号，其他都写死 -->
            <el-descriptions-item label="性别">{{ userInfo.gender }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ userInfo.age }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{
                this.$store.state.user.userInfo.user.username }}</el-descriptions-item>
            <el-descriptions-item label="居住地">{{ userInfo.habitation }}</el-descriptions-item>
            <el-descriptions-item label="单位/学校">
                <span> {{ userInfo.company }}</span> <el-tag size="small">学校 </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="联系地址">{{ userInfo.address }}</el-descriptions-item>

            <template slot="extra">
                <el-button type="primary" icon="el-icon-edit" size="small" class="button">修改</el-button>
            </template>
        </el-descriptions>
    </div>
</template>
<script>
export default {
    data() {
        return {
            userInfo: {//先自己定义数据
                nickname: '',
                gender: '男',
                age: '18',
                username: '',
                habitation: '柳州市',
                company: '广西科技大学 ',
                address: '广西壮族自治区柳州市城中区文昌路2号'
            },
            dialogVisible: false,
        }
    },
    // mounted() {
    //     console.log(666, this.$store.state.user.userInfo.user)
    // },
    methods: {

        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
        openDialog() {
            this.dialogVisible = true;
        }

    }
}
</script>
<style scoped lang="less">
// .tabs {
//     width: 1000px;
//     margin: 0 auto;
// }

// .el-tabs {
//     height: auto;
// }

// .margin-top {
//     height: 200px;
//     font-size: medium;
//     font-weight: bold;
// }

// .button {
//     margin-top: auto;

// }
</style>